import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Breadcrumb, Popover } from 'antd';

import { WeaLocaleProvider, WeaTools } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

import { formatMenuData } from '../../util/themeUtil';

import './style';
import Menu from './Menu';
import E9QuickSearch from '../theme/ecology9/E9QuickSearch';

@inject('portalThemeStore')
@observer
class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            type: 'module',
            data: [{ name: getLabel(33675, '前端菜单'), data: [] }],
        };
        this.setShowData = this.setShowData.bind(this);
        this.getShowData = this.getShowData.bind(this);
        this.onHomeClick = this.onHomeClick.bind(this);
        this.onModuleClick = this.onModuleClick.bind(this);
        this.resetShowData = this.resetShowData.bind(this);
    }

    componentWillMount() {
        const { portalThemeStore } = this.props;
        portalThemeStore.getThemeConfig();
        portalThemeStore.getFrontEndMenu();

        WeaTools.callApi('/api/portal/menu/getFrontEndMenu', 'GET', {
            withPortal: '0',
            isLoadAll: '1',
        }).then((result) => {
            const { data = [] } = result;
            const frontEndMenu = formatMenuData(data);
            this.setState({
                index: 0,
                data: [{ name: getLabel(33675, '前端菜单'), data: frontEndMenu }],
            });
        });
    }

    render() {
        const { index, type, data } = this.state;

        return (
            <div className="em7-portal">
                <div className="em7-portal-toolbar">
                    <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@dt1f8t`}
                      trigger="hover"
                      placement="bottomRight"
                      overlayClassName="em7-portal-menu-overlay"
                      content={<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@mfzm6p`} type="portal" resetShowData={this.resetShowData} />}
                    >
                        <div className="em7-portal-home" onClick={this.onHomeClick}>
                            <i className="wevicon-home" />
                        </div>
                    </Popover>
                    <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@ed65sb`}
                      trigger="hover"
                      placement="bottomRight"
                      overlayClassName="em7-portal-menu-overlay"
                      content={<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@7k605a`} type="module" resetShowData={this.resetShowData} />}
                    >
                        <div className="em7-portal-module" onClick={this.onModuleClick}>
                            <i className="icon-coms-List" />
                        </div>
                    </Popover>
                    <div className="em7-portal-nav">
                        <Breadcrumb ecId={`${this && this.props && this.props.ecId || ''}_Breadcrumb@ezjo91`} separator={<i className="icon-coms-organization-right" />}>
                            {
                                data.map((item, index) => {
                                    const canClick = item.data && item.data.length;
                                    return <Breadcrumb.Item ecId={`${this && this.props && this.props.ecId || ''}_Breadcrumb.Item@z0cf4t@${index}`} key={index} onClick={() => canClick && this.getShowData(index)}>{item.name}</Breadcrumb.Item>;
                                })
                            }
                        </Breadcrumb>
                    </div>
                    <div className="em7-portal-search">
                        <E9QuickSearch ecId={`${this && this.props && this.props.ecId || ''}_E9QuickSearch@9w7nqe`} from="em7" {...this.props} />
                    </div>
                </div>
                <div className="em7-portal-content">
                    <div id="themeLayoutMask" className="em7-portal-mask" />
                    <div className="em7-portal-main">
                        <div id="themeLayoutRoute" className="em7-portal-route">
                            {
                                this.props.children ? this.props.children : (
                                    <ul className="em7-portal-content-menus">
                                        {
                                            data[index].data.map((item) => {
                                                let iconComp = null;
                                                if (item.icon) {
                                                    iconComp = <i className={item.icon} />;
                                                } else if (index == 0 && type == 'module') {
                                                        iconComp = <i className={`wevicon-top-menu-default wevicon-top-menu-${item.infoId}`} />;
                                                    } else {
                                                        iconComp = <i className={`wevicon wevicon-menu-default wevicon-menu-${item.levelid}`} />;
                                                    }

                                                return (
                                                    <li key={item.infoId} onClick={() => this.setShowData(item, index + 1)}>
                                                        <div className={`em7-portal-content-menu e9header-top-menu-color${(Math.abs(parseInt(item.infoId, 10)) & 7)}`}>{iconComp}</div>
                                                        <span>{item.name}</span>
                                                    </li>
                                                );
                                            })
                                        }
                                    </ul>
                                )
                            }
                        </div>
                        <div id="themeLayoutFrame" className="em7-portal-frame">
                            <iframe id="mainFrame" name="mainFrame" src="about:blank" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    setShowData(item, index) {
        const { portalThemeStore } = this.props;

        const { data } = this.state;
        data.push({
            name: item.name,
            data: item.child || [],
        });
        this.setState({ index, data });

        if (!item.child || !item.child.length) {
            portalThemeStore.onLoadMain(item);
        }
    }

    getShowData(index) {
        const { portalThemeStore } = this.props;

        if (index >= 0) {
            const { data } = this.state;
            this.setState({ index, data: data.slice(0, index + 1) });
            portalThemeStore.onLoadMain({ mobxrouteurl: '/main' });
        }
    }

    onHomeClick() {
        const { portalThemeStore } = this.props;
        const { frontEndMenu = [] } = portalThemeStore;
        const _frontEndMenu = toJS(frontEndMenu);

        let portalMenu = [];
        if (_frontEndMenu && _frontEndMenu.length) {
            portalMenu = _frontEndMenu[0].child;
        }

        const data = [{ name: getLabel(385779, '我的门户'), data: portalMenu }];

        if (portalMenu && portalMenu.length) {
            const item = portalMenu[0];
            data.push({
                name: item.name,
                data: item.child || [],
            });
            portalThemeStore.onLoadMain(item);
        } else {
            portalThemeStore.onLoadMain({ mobxrouteurl: '/main' });
        }

        this.setState({
            index: 0,
            type: 'portal',
            data,
        });
    }

    onModuleClick() {
        const { portalThemeStore } = this.props;
        const { frontEndMenu = [] } = portalThemeStore;
        const _frontEndMenu = toJS(frontEndMenu);

        let moduleMenu = [];
        if (_frontEndMenu && _frontEndMenu.length) {
            moduleMenu = _frontEndMenu.slice(1);
        }

        this.setState({
            index: 0,
            type: 'module',
            data: [{ name: getLabel(33675, '前端菜单'), data: moduleMenu }],
        });
        portalThemeStore.onLoadMain({ mobxrouteurl: '/main' });
    }

    resetShowData(type, item) {
        const { portalThemeStore } = this.props;
        const { frontEndMenu = [] } = portalThemeStore;
        const _frontEndMenu = toJS(frontEndMenu);

        let leftMenu = [];
        if (_frontEndMenu && _frontEndMenu.length) {
            if (type == 'portal') {
                leftMenu = _frontEndMenu[0].child;
            } else if (type == 'module') {
                leftMenu = _frontEndMenu.slice(1);
            }
        }

        this.setState({
            index: 1,
            type,
            data: [{
                name: type == 'portal' ? getLabel(385779, '我的门户') : getLabel(33675, '前端菜单'),
                data: leftMenu,
            }, {
                name: item.name,
                data: item.child || [],
            }],
        });
    }
}

export default Index;
